<!-- 
    * @Author: songgh
    * @Date: 2021-09-19 17:41:08
    * @LastEditors: songgh
    * @LastEditTime: 2021-09-19 17:41:08
    * @Description: composition 示例
-->
<template>
  <div class="example">
    <a-input-number
      id="inputNumber"
      v-model:value="loadNum"
      :min="-100"
      :max="100"
    />
    <div>{{ loadNum }}</div>
    <div>{{ state }}</div>
    <div class="h-80 w-80 bg-red-600"></div>
  </div>
</template>

<script>
import { defineComponent } from "@vue/runtime-core";
import { ref } from "vue";
import { Store, useStore } from "vuex";

export default defineComponent({
  name: "Example",
  setup(props, context) {
    const store = useStore();
    const loadNum = ref(store.state.app.loadNum);
    return {
      loadNum,
    };
  },
  computed: {
    state() {
      return this.$store.state;
    },
  },
  mounted() {},
  watch: {
    loadNum: {
      handler(data) {
        this.$store.dispatch("app/setLoadNum", data);
      },
    },
  },
});
</script>

<style lang="less" scoped>
.example {
}
</style>
